var undefined;

function getFirstNodeOfType(nodeType,parent) {
	parent = (parent) ? parent : document;
	for ( var m = parent.firstChild; m != null; m = m.nextSibling ) {
		switch (nodeType) {
			case Node.ELEMENT_NODE:
				if (m.nodeType == 1) return m;
				break;
			case Node.TEXT_NODE:
				if (m.nodeType == 3) return m;
				break;
		}
	}
	return null;
}

function getFirstElementOfClass(tagName,className,root) {
    var nodeOfInterest, kids;
    root = (root) ? root : window.document;
    kids = root.getElementsByTagName(tagName);
    for ( var j = 0; j < kids.length; j++ ) {
        if ( kids[j].className.indexOf(className) != -1 ) nodeOfInterest = kids[j];
    }
    return nodeOfInterest;
}

function getElementsByClassName(tagName,className,root) {
    var nodesOfInterest, kids;
    root = (root) ? root : window.document;
    nodesOfInterest = new Array();
    kids = root.getElementsByTagName(tagName);
    for ( var j = 0; j < kids.length; j++ ) {
        if ( kids[j].className.indexOf(className) != -1 ) nodesOfInterest[nodesOfInterest.length] = kids[j];
    }
    return nodesOfInterest;
}

function getFirstAncestorOfTagName(n,tagName) {
	//alert('entering recurse');
	if (!n.parentNode) {
		return;
	} else if (n.parentNode.nodeName == tagName.toUpperCase()) {
		return n.parentNode;
	} else {
		getFirstAncestorOfTagName(n.parentNode,tagName);
	}
}

function getFirstChildOfTagName(n,tagName) {
	tagName = tagName.toUpperCase();
	if (n.hasChildNodes()) {
		for ( var i = 0; i < n.childNodes.length; i++ ) {
			if ( n.childNodes[i].nodeName == tagName ) {
				return n.childNodes[i];
			}
		}
	}
	return;
}

function addEventListeners(EventSource,EventType,EventHandler,captures) {
	captures = (captures) ? captures : false;
	if ( document.addEventListener ) {
		EventSource.addEventListener(EventType,EventHandler,captures);
	} else if (document.attachEvent) {
		EventType = "on" + EventType;
		EventSource.attachEvent(EventType,EventHandler);
	} else {
		EventType = "on" + EventType;
		EventSource[EventType] = EventHandler;
	}
}

function removeEventListeners(EventSource,EventType,EventHandler,captures) {
	captures = (captures) ? captures : false;
	if ( document.removeEventListener ) {
		EventSource.removeEventListener(EventType,EventHandler,captures);
	} else if (document.detachEvent) {
		EventType = "on" + EventType;
		EventSource.detachEvent(EventType,EventHandler);
	} else {
		EventType = "on" + EventType;
		EventSource[EventType] = null;
	}
}

function getEvent(evt) {
	return (evt) ? evt : (window.event) ? window.event : null;
}

function getTarget(evt) {
	return (evt.target) ? evt.target : (evt.srcElement) ? evt.srcElement : null;
}

function getCurrentTarget(evt,currentTarget) {
	return (evt.currentTarget) ? evt.currentTarget : (currentTarget) ? currentTarget : (this) ? this : null;
}

function getPos(n,evt) {
	if (n == 'X') {
		return (evt.pageX) ? evt.pageX : (document.documentElement.scrollLeft) ? (document.documentElement.scrollLeft + evt.clientX) : (document.body.scrollLeft) ? (document.body.scrollLeft + evt.clientX) : evt.clientX;
	} else {
		return (evt.pageY) ? evt.pageY : (document.documentElement.scrollTop) ? (document.documentElement.scrollTop + evt.clientY) : (document.body.scrollTop) ? (document.body.scrollTop + evt.clientY) : evt.clientY;
	}
}

function getInnerDimension(n) {
	if (n == 'W') {
			return (window.innerWidth) ? window.innerWidth : (document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body.clientWidth) ? document.body.clientWidth : 0;
	} else {
			return (window.innerHeight) ? window.innerHeight : (document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body.clientHeight) ? document.body.clientHeight : 0;	
	}
}

function bubbleCancel(evt) {
	if (!evt) return;
	if (evt.stopPropagation) {
		evt.stopPropagation();
		evt.preventDefault();
	} else if (typeof evt.cancelBubble != undefined) {
		evt.cancelBubble = true;
		evt.returnValue = false;
	} else {
		return false;
		evt = null;
	}
}

var isOpera = false;
var isSafari = false;
var isIE5Mac = false;
var isIEWin = false;
var isIEWin50 = false;
var isIEWin55plus = false;

function UADetect() {
	var UA = navigator.userAgent;
	//document.write(UA);
	if (UA.indexOf("Opera") != -1)
		isOpera = true;
	else if (UA.indexOf("AppleWebKit") != -1)
		isSafari = true;
	else if (UA.indexOf("Mac") != -1 && UA.indexOf("MSIE ") != -1)
		isIE5Mac = true;
	else if (UA.indexOf("Win") != -1 && UA.indexOf("MSIE") != -1 && UA.indexOf("Opera") == -1) {
		isIEWin = true;
		if (UA.indexOf("MSIE 5.0") != -1)
			isIEWin50 = true;
		else
			isIEWin55plus = true;
	}
}

UADetect();

		var numPics = 500;
		var widgetWidth = 500;
		var dividend = widgetWidth/numPics;
		var incrementValue = numPics/widgetWidth;
		var selected;
		var start;
		var end;
		var console;
		var slideWrap;
		var slide;
		var handles;
		var target;
		var slideW;
		var slideX;
		var startX;
		var initX;
		var posX = 1;
		var deltaX;
		var MIN_X = 1;
		var MAX_X = 503;
		var MIN_W = 1;
		
		function calc(newNumPics) {
			numPics = newNumPics;
			dividend = widgetWidth/numPics;
			incrementValue = numPics/widgetWidth;
			paintSelection(dividend);
		}
		
		function init() {
			console = document.getElementById("console");
			slideWrap = document.getElementById("slide-wrap");
			slide = document.getElementById("slide");
			addEventListeners(slide,"mousedown",slideDownHandle);
			handles = [document.getElementById("handle-left"),document.getElementById("handle-right")];
			for ( var i = 0; i < handles.length; i++ ) {
				addEventListeners(handles[i],"mousedown",resizeDownHandle);
			}
			paintHandles();
			paintSelection(dividend);
		}
		
		function slideDownHandle(evt) {
			evt = getEvent(evt);
			target = getTarget(evt);
			while (target != slide) target = target.parentNode;
			slideW = parseInt(target.style.width) + 2;
			startX = getPos('X',evt);
			deltaX = startX - parseInt(target.style.left);
			addEventListeners(document,"mousemove",slideMoveHandle);
			addEventListeners(document,"mouseup",slideUpHandle);
			bubbleCancel(evt);

			function slideMoveHandle(evt) {
				evt = getEvent(evt);
				initX = getPos('X',evt);
				posX = initX - deltaX;
				posX = ( posX < MIN_X ) ? MIN_X : posX;
				posX = ( posX > MAX_X - slideW ) ? MAX_X - slideW : posX;
				target.style.left = posX + "px";
				//conSole();
				paintHandles();
				paintSelection(dividend);
				bubbleCancel(evt);
			}

			function slideUpHandle(evt) {
				evt = getEvent(evt);
				posX = getPos('X',evt);
				removeEventListeners(document,"mousemove",slideMoveHandle);
				removeEventListeners(document,"mouseup",slideUpHandle);
				bubbleCancel(evt);
			}
		}
		
		
		function resizeDownHandle(evt) {
			evt = getEvent(evt);
			target = getTarget(evt);
			while (target.nodeName != "DIV") target = target.parentNode;
			startX = getPos('X',evt);
			deltaX = startX - parseInt(target.style.left);
			slideW = parseInt(slide.style.width);
			slideX = parseInt(slide.style.left);
			target.style.backgroundColor = "#bdf";
			addEventListeners(document,"mousemove",resizeMoveHandle);
			addEventListeners(document,"mouseup",resizeUpHandle);
			//conSole();
			bubbleCancel(evt);

			function resizeMoveHandle(evt) {
				evt = getEvent(evt);
				initX = getPos('X',evt);
				posX = initX - deltaX;
				if ( target.id == "handle-right" ) {
					posX = (posX < MIN_X + 51) ? MIN_X + 51 : posX;
					posX = (posX > MAX_X + 48) ? MAX_X + 48 : posX;
					posX = (posX < slideX + 51) ? slideX + 51 : posX;
					target.style.left = posX + "px";
					slide.style.width = (slideW + ((posX + deltaX) - startX)) + "px";
				} else {
					posX = (posX < MIN_X + 30) ? MIN_X + 30 : posX;
					posX = (posX > MAX_X + 30) ? MAX_X + 30 : posX;
					posX = (posX > parseInt(handles[1].style.left) - 21) ? parseInt(handles[1].style.left) - 21 : posX;
					target.style.left = posX + "px";
					slide.style.left = (posX - 30) + "px";
					slide.style.width = (slideW + (slideX - posX + 30)) + "px";
				}
				//conSole();
				paintSelection(dividend);
				bubbleCancel(evt);
			}

			function resizeUpHandle(evt) {
				evt = getEvent(evt);
				target.style.backgroundColor = "#eee";
				removeEventListeners(document,"mousemove",resizeMoveHandle);
				removeEventListeners(document,"mouseup",resizeUpHandle);
				bubbleCancel(evt);
			}
		}
		
		
		function paintHandles() {
			handles[0].style.left = (parseInt(slide.style.left) - 20 + 50) + "px";			
			handles[1].style.left = (parseInt(slide.style.left) + parseInt(slide.style.width) + 50) + "px";
			for ( var i = 0; i < handles.length; i++ ) {
				handles[i].style.display = "";
			}
		}
		
		function paintSelection(dividend) {
			selected = Math.round((parseInt(slide.style.width))/dividend);
			selected = (selected == 0) ? 1 : selected;
			slide.firstChild.innerHTML = selected;

			start = Math.round(parseInt(slide.style.left)/dividend);
			start = (start == 0) ? 1 : start;
			end = Math.ceil((parseInt(slide.style.left) + parseInt(slide.style.width))/dividend);
			end = (end == 0) ? 1 : (end == selected) ? parseInt(selected) + 1 : end;

			start = (start <= incrementValue + 1) ? 1 : start;
			end = (end > numPics) ? parseInt(numPics) + 1 : end;

			handles[0].firstChild.innerHTML = start;
			handles[1].firstChild.innerHTML = end;
		}
		
		function conSole() {
			console.innerHTML = "startX:" + startX + "<br>" +
								"initX:" + initX + "<br>" +
								"posX:" + posX + "<br>" +
								"parseInt(target.style.left):" + parseInt(target.style.left) + "<br>" +
								"deltaX:" + deltaX + "<br>" + 
								"slideW:" + slideW + "<br>";
		}
